import React, {memo} from 'react';
import './mobile-picture.css'

class MobileTest extends React.Component {
   
    constructor() {
        super()
        this.state={
            imgPath: `${require('./img/@1.png')}`,
            status: "1"
        }
    }

    componentDidMount() {
        // document.title = "图片高清"
    }
   
    chagePicture = (e) => {
        const index = e.target.dataset.index;
        let url = "";
        switch (index) {
            case "1":
                url = `${require('./img/@1.png')}`;
                break;
            case "2":
                url = `${require('./img/@2.png')}`;
                break;
            case "3":
                url = `${require('./img/@3.png')}`;
                break;
        }
        this.setState({
            imgPath: url,
            status: index
        })
    }

    render() {
        const { status } = this.state
        return (
            <div id="mobile-picture">
                <h2>图片高清问题</h2>
                
                <img className="img" src={this.state.imgPath} />
                <hr />
                <h3>{`这是${this.state.status}倍图片`}</h3>
                <button onClick={()=>alert(window.devicePixelRatio)}>dpr</button>
                <div onClick={this.chagePicture}>
                    <button data-index="1" className={status==="1" ? "active" : ""}>1倍图片</button> 
                    <button data-index="2" className={status==="2" ? "active" : ""}>2倍图片</button> 
                    <button data-index="3" className={status==="3" ? "active" : ""}>3倍图片</button>
                </div> 
            </div>
        )
    }
}

export default memo(MobileTest);